<template>
  <div class="mainor">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom0">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>操作记录</span>
          </div>
        </div>
        <div class="marginBottom5 marginTop15">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="商品" prop="goods_spu_id">
              <change-goods-input
                ref="changeGoodsInput"
                @clear="
                  () => {
                    this.form.goods_spu_id = '';
                  }
                "
                @sendValue="
                  (data) => {
                    this.form.goods_spu_id = data.goods_id;
                  }
                "
              ></change-goods-input>
            </el-form-item>
            <el-form-item label="操作日期" prop="time">
              <el-date-picker
                v-model="form.time"
                type="date"
                class="wid220"
                :editable="false"
                placeholder="操作日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 商品名称 -->
    <div class="main_spac1" style="padding-top: 5px">
      <div class="main_white padding10">
        <div class="main_table marginTop10" style="min-height: 330px">
          <el-table
            ref="multipleTable"
            :data="list.data"
            element-loading-text="加载中"
            fit
            border
            v-loading="listLoading"
            highlight-current-row
          >
            <el-table-column
              label="商品名称"
              prop="goods.name"
              width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope"
                >{{ scope.row.goods.name }}【{{
                  scope.row.goods_spu.spu_name
                    ? scope.row.goods_spu.spu_name.title
                    : ""
                }}】</template
              >
            </el-table-column>
            <el-table-column
              label="单位"
              prop="goods_spu.spu_unit.title"
              :show-overflow-tooltip="true"
              ><template slot-scope="scope">
                {{ scope.row.goods_spu.spu_unit.title }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作对象"
              prop="unit"
              :show-overflow-tooltip="true"
              ><template slot-scope="scope">{{
                fields[scope.row.field]
              }}</template>
            </el-table-column>
            <el-table-column
              label="值"
              prop="value"
              width="350"
              class-name="main_hei"
            >
            </el-table-column>
            <el-table-column
              label="操作人员"
              prop="admin_user.name"
              width="350"
              class-name="main_hei"
            >
            </el-table-column>
            <el-table-column
              label="操作时间"
              prop="updated_at"
              width="350"
              class-name="main_hei"
            >
              <template slot-scope="scope">
                {{ parseTime(scope.row.updated_at) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/warehouse/warehouseReceipt_add";
import { storage_log } from "@/api/warehouse/warehouseNow";
import { parseTime } from "@/utils/index";
export default {
  computed: {
    total() {
      let sz = 0;
      this.monitorForm.list.forEach((e) => {
        sz += parseFloat(e.num * e.price);
      });
      return this.$toFixed(sz);
    },
  },
  components: {},
  data() {
    return {
      parseTime,
      // 列表数据
      list: {
        data: [],
      },
      form: {
        goods_spu_id: "",
        time: parseTime(new Date(), "{y}-{m}-{d}"),
      },
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      listLoading: false,
      fields: {},
    };
  },
  mounted() {},
  destroyed() {},
  created() {
    // 基本信息
    this.storage_log();
  },
  methods: {
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr_sh = [];
      val.map((item) => {
        this.selectArr_sh.push({ id: item.id });
      });
    },
    getArticleList() {
      this.current.page = 1;
      this.storage_log();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeGoodsInput"].name = "";
      this.storage_log();
    },
    // 请求数据
    storage_log() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.current,
        this.form
      );
      storage_log(data).then((res) => {
        if (res.errcode == 0) {
          this.list = res.data.list;
          this.fields = res.data.fields;
          console.log(this.list);
          this.totalCount = res.data.list.total;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.storage_log();
    },
    changePage(page) {
      this.current.page = page;
      this.storage_log();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.main_name {
  top: 5px;
  position: relative;
}
.main_addr {
  top: -5px;
  position: relative;
}
.mainor {
  /deep/.el-button--default {
    border-color: $menuActiveText;
    color: $menuActiveText;
  }
  /deep/.el-form {
    margin-top: 10px;
    /deep/.el-form-item--mini.el-form-item,
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }
  }
  .remark_in {
    width: 100%;
    /deep/.el-form-item__content {
      width: 80%;
      .el-input {
        width: 66.9%;
      }
    }
  }
  .mainor_sp {
    ul {
      margin-right: 20px;
      li {
        margin-bottom: 10px;
        & > span {
          display: inline-block;
          line-height: 32px;
          width: 60px;
          color: $colour_18;
          font-size: $font_14;
          text-align: right;
          em {
            color: $colour_red;
            margin-right: 5px;
          }
        }
        &:first-child {
          & > span {
            width: 85px;
          }
        }
      }
    }
  }
  .newConBox.on {
    width: calc(100% - 230px);
    padding-left: 0;
  }
  .mainor_pr {
    margin-left: 10px;
    margin-bottom: 10px;
    /deep/.el-button--default {
      border-color: $subActive;
      color: $menuText;
      &:hover {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
    .mainor_prr {
      font-size: $font_16;
      color: $colour_18;
      span {
        color: #fe3b3b;
        margin-left: 10px;
      }
    }
  }
  .main_table {
    /deep/.el-table--small td {
      padding: 10px 0;
    }
  }
  .main_taf {
    /deep/.el-table--small td {
      padding-top: 0;
    }
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 16px;
      margin-top: 16px;
      margin-right: 0;
    }
  }
}
</style>
